<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('表格数据')" />
</head>
<body class="gray-bg">
<div class="container-div">
	<div class="col-sm-12 search-collapse">
		<p class="select-title">多级联动下拉查询</p>
		<form id="cxselect-form">
			<div class="select-list">
				<ul id="element">

					<li>
						<label style="width: 80px">任务类型:</label>
						<select class="type" data-none-selected-text="请选择" multiple>
							<option value="">2018</option>
							<option value="0">2019</option>
							<option value="1">2020</option>
							<option value="2">2021</option>
							<option value="3">2022</option>
						</select>
					</li>
					<li>
						<label style="width: 80px"> 任务年限：</label>
						<select class="router" data-none-selected-text="请选择" multiple>
							<option value="">2018</option>
							<option value="0">2019</option>
							<option value="1">2020</option>
							<option value="2">2021</option>
							<option value="3">2022</option>
						</select>
					</li>
					<li>
						<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
						<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('cxselect-form')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
					</li>
				</ul>
			</div>
		</form>
	</div>
	<div class="row">
		<div class="col-sm-12 select-table table-striped">
			<table id="bootstrap-table"></table>
		</div>
	</div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
	var prefix = ctx + "demo/table";
	var datas1 = [[${@dict.getType('sys_task_type')}]];
	var datas2 = [[${@dict.getType('sys_audit_method')}]];
	var datas3 = [[${@dict.getType('sys_task_status')}]];
	$(function() {
		var options = {
			url: prefix + "/list2",
			showFooter: true,
			showSearch: false,
			showRefresh: false,
			showToggle: false,
			showColumns: false,
			footerStyle: footerStyle,
			columns: [{
				checkbox: true
			},
				{
					field : 'taskId',
					title : '任务序号'
				},
				{
					field : 'taskName',
					title : '任务名称'
				},
				{
					field : 'reportName',
					title : '报表姓名'
				},
				{
					field : 'taskTime',
					title : '任务时限'
				},
				{
					field : 'taskType',
					title : '任务类型',
					formatter: function(value, row, index) {
						return $.table.selectDictLabel(datas1, value);
					}
				},
				{
					field : 'taskFile',
					title : '任务附件',
				},
				{
					field : 'taskExecutor',
					title : '任务执行人',
				},
				{
					field : 'examineMethod',
					title : '审核方式',
					formatter: function(value, row, index) {
						return $.table.selectDictLabel(datas2, value);
					}
				},
				{
					field: 'status',
					title: '任务状态',
					formatter: function(value, row, index) {
						return $.table.selectDictLabel(datas3, value);
					}
				},
				{
					title: '操作',
					align: 'center',
					formatter: function(value, row, index) {
						var actions = [];
						actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>查看</a> ')
						actions.push('<a class="btn btn-success btn-xs" href="/demo/table/filling"><i class="fa fa-edit"></i>填报</a> ');
						actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>下发</a>');
						return actions.join('');
					}
				}]
		};
		$.table.init(options);
	});

	function footerStyle(column) {
		return {
//         	    userBalance: {
//         	        classes: 'class'
//         	    },
			userBalance: {
				css: { color: 'red', 'font-weight': 'normal' }
			}
		}[column.field]
	}
</script>
</body>
</html>